<template>
  <div class="shopList">
    <div id="imgbigbox" @click="hideBigImg()">
      <img
        id="imgTag"
        :src="thisimg"
        alt=""
        @load="loadImg()"
        @click.stop="stopPropagation()"
      />
    </div>
    <div class="shopList_bottom">
      <div class="new">
        <div class="shopList">
          <div class="new_goods_btn">
            <button @click="handerBanner">
              <i class="el-icon-trophy"></i>新增Banner
            </button>
            <div class="marketBox">
              <span>卖场：</span>
              <el-select
                v-model="marketId"
                clearable
                @change="selectMarket"
                filterable
                placeholder="请选择卖场"
              >
                <el-option
                  v-for="item in marketList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="shopList_serch">
            <div class="shopList_serch_ipt">
              <el-select v-model="search.type" placeholder="请选择banner类型">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="search.keyword"
                placeholder="请输入商品信息查询"
              ></el-input>
              <button @click="handerSeach">
                <i class="el-icon-search"></i>搜索
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="shopList_table">
        <div class="shopList_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>客户端类型</th>
              <th>banner类型</th>
              <th>banner类型id</th>
              <th>优先级</th>
              <th>名称</th>
              <th>标题</th>
              <th>内容</th>
              <th>所属卖场</th>
              <th>banner</th>
              <th class="doShop">操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>
                <font
                  class="checkbox"
                  :class="{ check_active: checkBoxAll.includes(i) }"
                  @click="handlerCheckbox(i)"
                  ><i class="el-icon-check"></i
                ></font>
              </td>
              <td>{{ v.id }}</td>
              <td>
                {{
                  v.apptype == 1
                    ? "用户小程序"
                    : v.apptype == 2
                    ? "合作方小程序"
                    : "其他"
                }}
              </td>
              <td>{{ v.type_name }}</td>
              <td>{{ v.type }}</td>
              <td>{{ v.sort }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.title }}</td>
              <td>{{ v.content }}</td>
              <td>{{ v.market_name }}</td>
              <td>
                <div class="logoImg">
                  <img
                    v-if="v.img"
                    :src="v.img"
                    alt=""
                    @click="toBigImg(v.img)"
                  />
                </div>
              </td>
              <!--
							<td>{{v.entry_status==1?'启用':'禁用'}}</td>
							-->
              <td class="doShop">
                <button class="editor" @click="toDetail(v.id)">详情</button>
                <button class="delete" @click="toDel(v.id)">删除</button>
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="10">当前数据空空如也</td>
            </tr>
          </table>
        </div>

        <div class="shopList_bottom_page">
          <div class="shopList_bottom_page_left">
            <!--
						<div class="shopList_bottom_page_left_checkAll" @click="handerCheckAll">
							<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
						</div>全选
						-->
            <!-- <button class="shopList_bottom_page_left_btn" @click="selectDel">删除</button> -->
          </div>
          <div class="shopList_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_id: null,
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [], //选中的数据
      tableList: [],
      search: {
        type: "",
        keyword: "",
      },

      thisimg: "",
      typeList: [],
      clientHeight: 0,
      marketId: "", //卖场id
      marketList: [],
    };
  },

  mounted() {
    let user_id = Number(localStorage.getItem("user_id"));
    this.user_id = user_id;
    this.getTypeList();
    this.getShopRoom();
    this.remoteMethod();
  },

  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1;
      this.pageSize = 10;
      this.getShopRoom();
    },

    // 获取商家列表
    getShopRoom(search = this.search) {
      this.$http
        .post("/api/root/Banner/index", {
          page: this.page,
          pagesize: this.pageSize,
          type: search.type,
          keyword: search.keyword,
          market_id: this.marketId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.tableList = res.data.list ? res.data.list : [];
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
          });
        });
    },

    getTypeList() {
      this.$http
        .post("/api/root/Banner/typeList", { page: 1, pagesize: 100 })
        .then((res) => {
          console.log(res, "typelist");
          if (res.code == 1) {
            let baselist = [{ id: 0, name: "全部" }];
            this.typeList = res.data.list
              ? baselist.concat(res.data.list)
              : baselist;
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
          });
        });
    },

    //新增banner按钮
    handerBanner() {
      this.$router.push({ path: "/bannerDetail" });
    },

    // 搜索
    handerSeach() {
      this.getShopRoom(this.search);
    },

    // 详情
    toDetail(id) {
      this.$router.push({ path: "/bannerDetail", query: { id } });
    },

    // 删除按钮
    toDel(id) {
      this.$confirm("确定删除该banner吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/api/root/Banner/del", { banner_id: id })
            .then((res) => {
              console.log(res, "删除结果");
              if (res.code == 1) {
                this.$message.success("删除成功");
                this.getShopRoom();
              } else {
                this.$message.warning(res.msg);
              }
            });
        })
        .catch(() => {});
    },

    //放大图片
    toBigImg(url) {
      this.thisimg = url;
      this.getClientHeight();
      document.getElementById("imgbigbox").style.display = "block";
    },
    loadImg() {
      let imgtag = document.getElementById("imgTag");
      let img = this;
      console.log(img);
      let width = img.width;
      let height = img.height;
      let clientHeight = this.clientHeight * 0.8;
      if (height >= clientHeight) {
        imgtag.height = clientHeight;
        imgtag.width = (clientHeight * width) / height;
      }
    },
    //收起图片
    hideBigImg() {
      document.getElementById("imgbigbox").style.display = "none";
    },
    //阻止事件冒泡
    stopPropagation() {
      //todo...
    },
    getClientHeight() {
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        this.clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      } else {
        this.clientHeight =
          document.body.clientHeight > document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      }
    },

    /*
        // 禁用和启用按钮
        shelves(id,entry_status){
			let is_reco=entry_status==1?0:1;
			this.$http.post('/api/root/StoreShop/enable',{store_id_lst:id,entry_status:is_reco}).then(res=>{
				console.log(res);
				if(res.code==1){
					this.getShopRoom()
					this.$message({
						type:'success',
						message:'操作成功'
					})
				}else{
					this.$message({
						type:'warning',
						message:res.msg
					})
				}
			})
		},
		*/

    /*
          // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].store_id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},

           */

    toBannerDetail(banner_id) {
      this.$router.push({ name: "shopDetail", query: { banner_id } });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      console.log(val);
      this.getShopRoom();
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(val);
      this.getShopRoom();
    },
  },
};
</script>
<style lang="less" scoped>
@import "bannerList.less";
</style>
<style>
#imgbigbox {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#imgbigbox img {
  max-width: 70%;
  max-height: 80%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

